<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>HOJ后台管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="./js/controller.js"></script>
  <script src="./js/myajax.js"></script>
  <script src="./js/filter.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">HOJ后台管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item"><a href="/front/index">返回主页</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li id="tab1" class="layui-nav-item">
          <a href="javascript:;">页面管理</a>
          <dl class="layui-nav-child">
            <dd id="tab1-1"><a href="./index">主页信息</a></dd>
            <dd><a href="javascript:;">bala bala</a></dd>
          </dl>
        </li>
        <li id="tab2" class="layui-nav-item">
          <a href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd id="tab2-1"><a href="./userList">用户概览</a></dd>
            <dd id="tab2-2"><a href="./code">代码查看</a></dd>
          </dl>
        </li>
        <li id="tab3" class="layui-nav-item">
          <a href="javascript:;">题目管理</a>
          <dl class="layui-nav-child">
            <dd id="tab3-1"><a href="./problemList">题目概览</a></dd>
            <dd id="tab3-2"><a href="./addProblem">添加题目</a></dd>
          </dl>
        </li>
        <li id="tab4" class="layui-nav-item">
          <a href="javascript:;">比赛管理</a>
          <dl class="layui-nav-child">
            <dd id="tab4-1"><a href="./contestList">比赛概览</a></dd>
            <dd id="tab4-2"><a href="./addContest">添加比赛</a></dd>
            <dd id="tab4-3"><a href="./contestUser">用户总览</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <table  class="layui-hide" id="demo" lay-filter="test"></table>
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="goBack"><i class="layui-icon">&#xe603;</i>返回</button>
          <button class="layui-btn layui-btn-sm" lay-event="addSchoolUser">按照学校新建</button>
          <button class="layui-btn layui-btn-sm" lay-event="addFromContest">复制其他比赛用户</button>
          <button class="layui-btn layui-btn-sm" lay-event="addUser">引入已有用户</button>
          <button class="layui-btn layui-btn-sm" lay-event="addFromExcel">从excel添加</button>
          <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="applyEdit">应用单元格修改</button>
        </div>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">移除</a>
      </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © Hunan University Online Judge
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
  //JavaScript代码区域
  var contestId = getUrlVar("contestId");
  if (isBlank(contestId) == true) {
    alert("contestId参数错误");
    window.location.href = "./contestList";
  }

  layui.use('element', function(){
    var element = layui.element;
  });
  var tab = document.getElementById("tab4");
  tab.className += "  layui-nav-itemed";
  var tab_t = document.getElementById("tab4-1");
  tab_t.className += " layui-this";

  var postList = new Object();
  layui.use('table', function(){
    var table = layui.table;
    var form = layui.form;
    //第一个实例
    table.render({
      elem: '#demo',
      toolbar: '#toolbarDemo',
      url: ojurl + "/admin/contest/user/list", //数据接口
      headers: {"token" : getName(tokenName)},
      where: {"contestId": contestId},
      parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.count, //解析数据长度
          "data": res.data.list //解析数据列表
        };
      },
      response: {
        statusCode: 200 //规定成功的状态码，默认：0
      },
      cols: [[ //表头
        {field: 'userId', width: 120, title: 'ID', sort: true, fixed: 'left'},
        {field: 'name', title: '赛队编号', width: 120},
        {field: 'nick', title: '赛队名称(单击单元格编辑)', width: 200, edit: 'text'},
        {field: 'password', title: '赛队密码(可编辑)', width: 150, edit: 'text'},
        {field: 'ip', title: '登陆ip'},
        {field: 'registerTime', title: '注册时间'},
        {field: 'school', title: '学校'},
        {width: 70, templet: '#barDemo', fixed: 'right'}
      ]]
    });

    //监听单元格编辑
    table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
    //   console.log(obj.value); //得到修改后的值
    //   console.log(obj.field); //当前编辑的字段名
    //   console.log(obj.data); //所在行的所有相关数据 
      var data = obj.data;
      var jsonData = new Object();
      jsonData.userId = data.userId;
      jsonData.nick = data.nick;
      jsonData.password = data.password;
      postList[jsonData.userId] = jsonData;
    });

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      if (obj.event == 'addSchoolUser') { //新建学校的用户
        layer.open({
          type: 1, //此处以iframe举例
          title: '添加题目',
          area: ['520px', '380px'],
          shade: 0,
          content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="startId" class="layui-form-label">开始编号</label>'+
            '<div class="layui-input-block"><input type="number" placeholder="用户起始编号不要与现有的重复" class="layui-input" id="startId" name="startId"/></div></div>'+
            '<div class="layui-form-item"><label for="count" class="layui-form-label">用户数量</label>'+
            '<div class="layui-input-block"><input type="number" placeholder="需要创建的用户数量" class="layui-input" id="count" name="count"/></div></div>'+
            '<div class="layui-form-item"><label for="school" class="layui-form-label">学校名称</label>'+
            '<div class="layui-input-block"><input type="text" class="layui-input" id="school" name="school"/></div></div>'+
            '<div class="layui-form-item layui-bg-orange">自动生成的用户名格式为team[递增编号]_[比赛编号]，</br>例如team123_12，</br>所以请确保开始编号没有和其他用户交叉</div>'+
            '</form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var jsonData = new Object();
            jsonData.startId = String(document.getElementById("startId").value);
            jsonData.count = String(document.getElementById("count").value);
            jsonData.school = String(document.getElementById("school").value);
            jsonData.contestId = String(contestId);
            addSchoolGroup(jsonData);
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
      else if (obj.event == 'addFromContest') { //从其他比赛用户添加
        layer.open({
          type: 1, //此处以iframe举例
          title: '添加题目',
          area: ['520px', '380px'],
          shade: 0,
          content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="oldContestId" class="layui-form-label">比赛编号</label>'+
            '<div class="layui-input-block"><input type="number" placeholder="另外一场比赛的编号" class="layui-input" id="oldContestId" name="oldContestId"/></div></div>'+
            '<div class="layui-form-item layui-bg-orange">确保当前的用户名和引入比赛的</br>用户名之间没有同一用户</div>'+
            '</form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var jsonData = new Object();
            var oldContestId = String(document.getElementById("oldContestId").value);
            jsonData.oldContestId = oldContestId;
            jsonData.contestId = String(contestId);
            addUserFromOldContest(jsonData);
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
      else if (obj.event == 'addUser') {  //加入比赛用户中的用户
        layer.open({
          type: 1, //此处以iframe举例
          title: '添加题目',
          area: ['520px', '380px'],
          shade: 0,
          content: '<form class="layui-form layui-form-pane" role="form" id="user" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="userId" class="layui-form-label">比赛用户ID</label>'+
            '<div class="layui-input-block"><input type="number" placeholder="对应比赛用户表里面的userId" class="layui-input" id="userId" name="userId"/></div></div></form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var jsonData = new Object();
            var userId = String(document.getElementById("userId").value);
            jsonData.userId = userId;
            jsonData.contestId = String(contestId);
            addUser(jsonData, layer);
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
      else if (obj.event == 'addFromExcel') {
        layer.alert("暂未实现");
      }
      else if (obj.event == 'goBack') {
        window.location.href = "./contestList";
      }
      else if (obj.event == 'applyEdit') {
        submitContestUserEdit(postList);
      }
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      layer.confirm('确认移除', function(){
        var jsonData = new Object();
        jsonData.userId = String(data.userId);
        jsonData.contestId = String(contestId);
        deleteUser(jsonData);
      });
    });
    
  });
</script>
</body>
</html>